﻿export function init(tabsId, dotNetHelper) {
    window.SORTABLE_INSTANCES ??= {};

    const tabsEl = document.getElementById(tabsId);
    const tabListEl = tabsEl.querySelector('.tabs-tab-list');

    const panel = tabsEl.parentElement;
    if (panel) {
        tabListEl.addEventListener('mouseover', (e) => {
            if (e.target === tabListEl) {
                for (const el of document.querySelectorAll('.panel.panel-active')) {
                    el.classList.remove('panel-active');
                }
                panel.classList.add('panel-active');
            }
        });

        tabListEl.addEventListener('mouseleave', () => {
            panel.classList.remove('panel-active');
        });
    }

    dispose(tabsId);
    window.SORTABLE_INSTANCES[tabsId] = new Sortable(tabListEl, {
        draggable: ".tab",
        filter: '.ignore-elements',
        direction: 'horizontal'
    });
}

export function dispose(tabsId) {
    if (window.SORTABLE_INSTANCES && window.SORTABLE_INSTANCES[tabsId]) {
        window.SORTABLE_INSTANCES[tabsId].destroy();
        delete window.SORTABLE_INSTANCES[tabsId];
    }
}